<template>
  <div class="home">
    <ul class="nav center">
      <li v-bind:class="index === 0 ? 'active' : ''" @click="setIndex(0)">
        网页
      </li>
      <li v-bind:class="index === 1 ? 'active' : ''" @click="setIndex(1)">
        视频
      </li>
      <li v-bind:class="index === 2 ? 'active' : ''" @click="setIndex(2)">
        图片
      </li>
      <li v-bind:class="index === 3 ? 'active' : ''" @click="setIndex(3)">
        知道
      </li>
      <li v-bind:class="index === 4 ? 'active' : ''" @click="setIndex(4)">
        文库
      </li>
      <li v-bind:class="index === 5 ? 'active' : ''" @click="setIndex(5)">
        贴吧
      </li>
      <li v-bind:class="index === 6 ? 'active' : ''" @click="setIndex(6)">
        地图
      </li>
      <li v-bind:class="index === 7 ? 'active' : ''" @click="setIndex(7)">
        咨询
      </li>
    </ul>
    <div class="nav-content">
      <div v-if="index === 0">
        <a href="http://www.baidu.com">百度一下</a>
        <div>
          百度（纳斯达克：BIDU）是全球最大的中文搜索引擎，中国最大的以信息和知识为核心的互联网综合服务公司，全球领先的人工智能平台型公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句...
        </div>
      </div>
      <div v-if="index === 1">视频页面</div>
      <div v-if="index === 2">图片页面</div>
      <div v-if="index === 3">知道页面</div>
      <div v-if="index === 4">文库页面</div>
      <div v-if="index === 5">贴吧页面</div>
      <div v-if="index === 6">地图页面</div>
      <div v-if="index === 7">咨询页面</div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      index: 0
    }
  },
  methods: {
    setIndex(index) {
      this.index = index
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 12rem;
  margin: 0 auto;
  .nav {
    li {
      width: 100%;
      text-align: center;
      cursor: pointer;
      &.active {
        background-color: gold;
      }
      &:hover {
        background-color: gold;
      }
    }
  }
}
</style>
